import {Button, Modal, TextContainer} from '@shopify/polaris';
import {useState, useCallback} from 'react';

interface Props {
    active: boolean;
    setActive: (value: boolean) => void;

}
function ModalExample({active,setActive}:Props) {
//   const [active, setActive] = useState(true);

  const handleChange = useCallback(() => setActive(!active), [active]);

  const activator = <Button onClick={handleChange}>Open</Button>;

  return (
    <div style={{height: '500px'}}>
      <Modal
        activator={activator}
        open={active}
        onClose={handleChange}
        title="复制产品"
        primaryAction={{
          content: 'Add Instagram',
          onAction: handleChange,
        }}
        secondaryActions={[
          {
            content: 'Learn more',
            onAction: handleChange,
          },
        ]}
      >
        <Modal.Section>
        </Modal.Section>
        <Modal.Section>
        </Modal.Section>
        <Modal.Section>
        </Modal.Section>
      </Modal>
    </div>
  );
}

export default ModalExample